<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"  
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<TITLE>SpringDemo</TITLE>
		<META name="description" content="THORNBIRD.COM"/>
		
		<!-- 引入外部js或css -->
		<script th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
		
		<!-- 引入内部js或css -->
		<script th:src="${'/lib/layui/layui.js'}" charset="utf-8"></script>
		<script th:src="${'/js/xadmin.js'}" type="text/javascript"></script>
		<link th:href="${'/css/font.css'}" rel="stylesheet">
		<link th:href="${'/css/xadmin.css'}" rel="stylesheet">
	</head>
	<body>
		<div class="x-nav">
			<span class="layui-breadcrumb">
				<a>资产管理</a>
				<a> <cite>我的资产</cite></a>
			</span>
			<a class="layui-btn layui-btn-small"
				style="line-height: 1.6em; margin-top: 3px; float: right"
				href="/property/grantPropertyListPage" title="刷新"> <i
				class="layui-icon" style="line-height: 30px">ဂ</i></a>
		</div>
		<div class="x-body">
			<div class="layui-row">
				<form id="form1" class="layui-form layui-col-md12 x-so">
					<input type="hidden" th:value="${user.userId}" name="userId"/>
					<span>快速查询：</span>
					<div class="layui-input-inline">
						<select name="propertyType" lay-filter="myselect2">
							<option value="">资产类型</option>
							<option th:each="propertyType : ${propertyTypes}" 
								th:value="${propertyType}" th:text="${propertyType}">
							</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="propertyModel" placeholder="资产型号"
							autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<input type="text" name="propertyName" placeholder="资产名称"
							autocomplete="off" class="layui-input">
					</div>
					<button type="submit" class="layui-btn" lay-submit="sreach()"
						lay-filter="sreach">
						<i class="layui-icon">&#xe615;</i>
					</button>
				</form>
			</div>
	
			<span class="x-right" style="line-height: 40px">共有数据：<a id="total">88</a> 条</span>
			<table class="layui-table">
				<thead>
					<tr>
						<th>资产名称</th>
						<th>类型</th>
						<th>型号</th>
						<th>数量</th>
						<th>总价</th>
					</tr>
				</thead>
				<tbody id="grantProperties">
					<tr>
						<td colspan=8>加载中<i class="layui-icon">&#xe63e;</i></td>
					</tr>
				</tbody>
			</table>
			<div align="center" id="pageDiv"></div>
		</div>
	</body>
	<script type="text/javascript">
		var propertyType=null;
		var propertyModel=null;
		var propertyName=null;
		var userId=0;
		var total=0;
		var limit=0;
		
		layui.use(['form', 'laypage', 'laydate'], function(){
			var form = layui.form,
			layer = layui.layer,
			laypage = layui.laypage,
			laydate = layui.laydate;
			
			form.on('submit(sreach)', function(data){
				console.log(data);
				
				propertyType=$("[name=propertyType]").val();
				propertyModel=$("[name=propertyModel]").val();
				propertyName=$("[name=propertyName]").val();
				userId=$("[name=userId]").val();
				
				showPage(-1);
				laypage.render({
					elem: 'pageDiv',
					count: total,
					limit: limit,
					jump: function(obj, first){
						console.log(obj.curr);
						console.log(obj.limit);
						if(!first){
							showPage(obj.curr);
						}
					}
				});
				return false;
		    });
			
			//分页的ajax
			function showPage(n) {
				$.ajax({
					type : "POST",
					async:false,
					data : {
						propertyType:propertyType,
						propertyModel:propertyModel,
						propertyName:propertyName,
						userId:$("[name=userId]").val(),
						currentPage:n
					},
					dataType : "text",
					url : "/property/grantProperties",
					success : function(result) {
						console.log(result);
						var tl = eval("(" + result + ")");
						if(n==-1){
							total=tl.total;
							limit=tl.pageSize;
							$("#total").text(total);
						}
						$("#grantProperties").html("");
						//json遍历
						if(tl.list.length>0){
							$.each(tl.list, function(n,val){
								console.log(n);
								var str="";
							    str+="<tr>";
							    str+="<td>"+val.propertyName+"</td>"
							    str+="<td>"+val.propertyType+"</td>"
							    str+="<td>"+val.propertyModel+"</td>"
							    str+="<td>"+val.propertyNum+"</td>"
							    str+="<td>"+val.totalPrice+"</td>"
							    str+="</tr>";
								$("#grantProperties").append(str);
							})
						}else{
							$("#grantProperties").append("<tr><td colspan=8 align=\"center\">暂时没有数据哦，快去添加一条吧</td></tr>");
						}
						
					},
					error : function() {
						layer.msg('无法连接服务器', {icon: 2});
					}
				});
			}
			
			//分页
			showPage(-1);
			laypage.render({
				elem: 'pageDiv',
				count: total,
				limit: limit,
				jump: function(obj, first){
					//obj包含了当前分页的所有参数，比如：
					console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
					console.log(obj.limit); //得到每页显示的条数
			    
					//首次不执行
					if(!first){
						showPage(obj.curr);
					}
				}
			});
		});
	</script>
</html>